<template>
  <component :is="tag" :style="styleProps" class="l-text">
    {{props.text}}
  </component>
</template>

<script lang="ts">
import {textStylePropNames} from "../defaultProps.ts";
import useComponentCommon from "../hooks/useComponentCommon.ts";
import {defineComponent, PropType} from "vue";
import {AllProps} from "@/types/props.ts";

export default defineComponent({
  name: 'l-text',
  props: {
    tag: {
      type: String,
      required: false,
      default: 'div'
    },
    props: {
      type: Object as PropType<Partial<AllProps>>,
      required: true,
    }
  },
  setup (props) {
    const {styleProps, handleClick} = useComponentCommon(props.props, textStylePropNames)
    return {
      styleProps,
      handleClick
    }
  }
})
</script>

<style scoped>
.l-text {
  cursor: pointer;
}
</style>